<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动距离与高度，兼容模式，可视尺寸</title>
</head>

<body>
    <div style="width: 5000px;border: 1px solid red;">
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </div>
    <script>
        //  查看滚动条的距离，
        // 常规（ie9/ie8及以下）：window.pageXOffset/window.pageYOffset
        // document.documentElement.scrollLeft
        // document.documentElement.scrollTop
        // 不常见 window.scrollX window.scrollY
        // 滚动条并不表示实际的距离
        console.log(document.documentElement.scrollLeft);
        //封装兼容方法
        function getScrollOffset() {
            if (window.pageXOffset) {
                return {
                    left: window.pageXOffset,
                    top: window.pageYOffset
                }
            } else {
                return {
                    left: document.body.scrollLeft + document.documentElement.scrollLeft,
                    top: document.body.scrollTop + document.documentElement.scrollTop
                }
            }
        }
        console.log(getScrollOffset());
        // 浏览器的标准模式和怪异模式
        // BackCompat 怪异模式
        // CSS1Compat w3c标准模式


        // 获取浏览器可视区域的尺寸 窗口的宽高
        // 常规: window.innerWidth/window.innerHeight
        // ie9及ie8以下的用法
        // document.documentElement.clientWidth
        // document.documentElement.clientHeight
        // 怪异模式
        // document.body.clientHeight
        // document.body.clientWidth
        // outerHeight outerWidth
        // 可视窗口兼容封装
        function getViewportSize() {
            if (window.innerWidth) {
                return {
                    width: window.innerWidth,
                    height: window.innerHeight
                }
            } else if (document.compatMode === 'BackCompat') {
                return {
                    width: document.body.clientWidth,
                    height: document.body.clientHeight
                }
            } else {
                return {
                    width: document.documentElement.clientWidth,
                    height: document.documentElement.clientHeight
                }
            }
        }
        console.log('可视窗口');
        console.log(getViewportSize());

        // 整个HTML的尺寸
        // document.body.scrollHeight/document.body.scrollWidth
        // document.documentElement.scrollHeight/document.documentElement.scrollWidth
        // window.innerWidth+window.pageXOffset的距离

        function getScrollSize() {
            if (document.body.scrollWidth) {
                return {
                    width: document.body.scrollWidth,
                    height: document.body.scrollHeight
                }
            } else {
                return {
                    width: document.documentElement.scrollWidth,
                    height: document.documentElement.scrollHeight
                }
            }
        }
        // getBoundingClientRect() 不实时
        // offsetLeft offsetTop,是相对父级元素的尺寸，如果没有父级元素就相对body
        // offsetParent   找到哪个父级定位
        //获取子元素位置尺寸
        function getElementDocPosition(el) {
            var parent = el.offsetParent,
                offsetLeft = el.offsetLeft,
                offsetTop = el.offsetTop
            while (parent) {
                offsetLeft += parent.offsetLeft;
                offsetTop += parent.offsetTop;
                parent = parent.offsetParent;
            }
            return {
                left: offsetLeft,
                top: offsetTop
            }
        }

        // 操纵滚动条
        // window.scroll(x,y)  window.scrollTo(x,y)
        // window.scrollBy(x,y)累加
    </script>
</body>

</html>